<template>
  <div>
    <a-tree
      checkable
      @check="onCheck"
      :checkedKeys="checkedKeys"
      :treeData="treeData"
      @expand="onExpand"
      :expandedKeys="expandedKeysss"
      :checkStrictly="checkStrictly">
      <span slot="hasDatarule" slot-scope="{slotTitle,ruleFlag}">
        {{ slotTitle }}
      </span>
    </a-tree>
  </div>
</template>

<script>
  import { queryTreeListForRole, queryRolePermission } from '@/api/api'

  export default {
    name: 'PermissionList',
    props: {
      value: [String, Array],
    },
    data(){
      return {
        roleId:"",
        treeData: [],
        defaultCheckedKeys:[],
        checkedKeys:[],
        expandedKeysss:[],
        checkStrictly: true, //不关联
      }
    },
    methods: {
      onCheck (o) {
        if(this.checkStrictly){
          this.checkedKeys = o.checked;
        }else{
          this.checkedKeys = o
        }
        this.$emit('change', this.checkedKeys);
      },
      onExpand(expandedKeys){
        this.expandedKeysss = expandedKeys;
      },
      handleSubmit() {
        return {
          permissionIds: this.checkedKeys.join(","),
          lastpermissionIds: this.defaultCheckedKeys.join(","),
        };
      },
      loadData(roleId){
        this.checkedKeys = [];
        this.defaultCheckedKeys = [];
        this.expandedKeysss = []
        queryTreeListForRole().then((res) => {
          if(res.success){
            this.treeData = res.result && res.result.treeList
            if(!roleId) return;
            queryRolePermission({ roleId }).then((res_)=>{
              if(res_.success){
                this.checkedKeys = [...res_.result];
                this.defaultCheckedKeys = [...res_.result];
                this.$emit('change', this.checkedKeys);
              }else{
                this.$message.warning(res_.message);
              }
            })
          }else{
            this.$message.warning(res.message);
          }
        })
      }
    },
    model:{
      prop: 'value',
      event: 'change'
    }
  }
</script>

<style lang="less" scoped>
</style>